import React from 'react';
import Child1 from './components/Child1';
import Child3 from './components/Child3';
import Immutable from "immutable";

class HasPure extends React.Component {

  constructor() {
    super();
    /* 不使用 immutable 时候的数据源 */
    this.state = {
      array: [{ fruit: ["苹果"], }],
      count: 0,
    };

    /* 使用 immutable 时候的数据源 */
    // this.state = {
    //   array: Immutable.fromJS([{ fruit: ["苹果"], }]),
    //   count: 0,
    // };
  }

  onClickAddCount = () => {
    /* 未使用 immutable 时候的操作 */
    this.state.array[0].fruit.push("哈哈");
    /* 未使用 immutable 时候的操作 */
    this.setState({
      array: this.state.array,
    });
    /* 使用 immutable 后的操作 */
    // const newState = this.state.array.setIn([0, "fruit"], this.state.array.get(0).get("fruit").push("香蕉"));
    /* 使用 immutable 后的操作 */
    // this.setState({
    //   array: newState,
    // }, () => {
    //   console.log(this.state.array.toJS());
    // });
  }

  render() {
    return (
      <div>
        {/* 不带 pure【 { this.state.array.map((item, index) => <li key={index}>{item.fruit}</li>)} 】 */}
        <Child1 onClick={this.onClickAddCount} />
        <Child3 array={this.state.array} />
      </div>
    );
  }
}

export default HasPure;
